<template>
  <div v-loading.fullscreen.lock="loading">
    <navbar :showHeaderIcon="true" />
    <div class="app-container">
      <div class="page-card">
        <div class="page-form">
          <el-form
            style="display: flex"
            ref="form"
            :model="queryParams"
            label-position="left"
            label-width="auto"
          >
            <el-form-item label="时间：" style="margin-bottom: 0">
              <el-date-picker
                v-model="time"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="handleSearch"
                value-format="yyyy-MM-dd"
                clearable
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item
              label="项目："
              style="margin-left: 20px; margin-bottom: 0"
            >
              <el-input
                style="width: 350px"
                v-model="queryParams.examName"
                placeholder="搜索项目名称或代码"
                prefix-icon="el-icon-search"
                @input="handleSearch"
                clearable
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>

      <div class="list">
        <Empty v-if="!loading && tableData.length == 0" />
        <div class="item" v-for="item in tableData" :key="item.id">
          <div class="item-content">
            <div class="item-title">
              {{ item.examName }}
            </div>
            <div class="item-status-box">
              <div class="item-status type">
                <dict-tag :options="dict.type.type" :value="item.examType" />
              </div>
              <!-- <div class="item-status">状态：0/9 已发布</div> -->
            </div>
            <div class="item-info">
              <p>
                <span class="info-item-label">考试时间：</span>
                <span> {{ item.startTime }} - {{ item.endTime }}</span>
                <span class="info-item-label">考试范围：</span>
                <span>
                  {{ selectDictLabel(dict.type.grade, item.grade) }}
                </span>
                <span class="info-item-label">考试模式：</span>
                <span
                  >{{ selectDictLabel(dict.type.mode, item.projectMode) }}
                  {{ item.selectTypeName }}</span
                >
              </p>
            </div>
          </div>

          <div class="item-button">
            <!-- <el-button type="primary" style="margin-right:15px;">成绩下载</el-button> -->
            <el-button type="primary" @click="buttonAnaysis(item)">成绩分析</el-button>
          </div>
        </div>
      </div>

      <div class="page-bottom">
        <div class="page-bottom-content">
          <span class="total">共{{ total }}条数据</span>
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { debounce } from "lodash";
import { Navbar } from "@/layout/components";
import { exammainlist, exammainlistbyteacher } from "@/api/xmgl";
export default {
  name: "Cjfx_cjfxxm",
  components: {
    Navbar,
  },
  dicts: ["grade", "type", "mode"],
  data() {
    return {
      loading: false,

      req: null,

      queryParams: {
        pageNum: 1,
        pageSize: 15,
      },

      total: 0,
      tableData: [],

      time: "",
    };
  },

  created() {
    if (this.$auth.hasRole("admin")) {
      this.req = exammainlist;
    } else {
      this.req = exammainlistbyteacher;
    }
    this.getList();
  },

  methods: {
    debouncedSearch: debounce(function () {
      this.queryParams.pageNum = 1;
      this.getList();
    }, 500),
    handleSearch() {
      this.debouncedSearch();
    },
    getList() {
      this.loading = true;
      this.tableData = [];
      if (this.time) {
        this.queryParams.startTime = this.time[0];
        this.queryParams.endTime = this.time[1];
      } else {
        this.queryParams.startTime = "";
        this.queryParams.endTime = "";
      }
      this.req({ ...this.queryParams, stopped: 0 })
        .then((response) => {
          this.tableData = response.rows;
          this.total = response.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    buttonAnaysis(item){
      sessionStorage.setItem('analysisXmxx',JSON.stringify(item))
      this.$router.push('/fxzy')
    },
    ck(item) {},
  },
};
</script>

<style lang='scss' scoped>
.app-container {
  .page-card {
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }
  .page-form {
    padding: 0;
    justify-content: space-between;
    flex-wrap: wrap;
    .el-form {
      width: 850px;
      .el-row + .el-row {
        margin-top: 14px;
      }
    }
  }

  .list {
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    padding-bottom: 70px;
    .item {
      & + .item {
        margin-top: 20px;
      }
      padding: 24px;
      background: #ffffff;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      align-items: center;

      .item-title {
        font-size: 20px;
        color: #2a303b;
        line-height: 24px;
        font-weight: bold;
      }

      .item-status-box {
        display: flex;
        margin-top: 14px;
        .item-status {
          padding: 6px 10px;
          border-radius: 12px;
          border: 1px solid #288f41;
          background: #288f410a;
          font-size: 12px;
          line-height: 12px;
          color: #288f41;
          margin-right: 10px;

          &.type {
            background: #1a48db0a;
            color: #1a48db;
            border-color: #1a48db;
          }
        }
      }

      .item-info {
        margin: 0;
        overflow: hidden;
        font-size: 14px;
        line-height: 22px;
        margin-top: 8px;
        p {
          display: flex;
          align-items: center;
          & + p {
            margin-top: 8px;
          }
          margin: 0;
          .item-info-btn {
            margin-left: 6px;
          }
          .info-item-label {
            color: #5b6371;
          }
          span + .info-item-label {
            margin-left: 24px;
          }
        }
      }
    }
  }
}
.page-bottom {
  width: 100vw;
  background: #ffffff;
  box-shadow: 0 4px 16px 0 #5572921a;
  height: 50px;
  justify-content: center;
  position: fixed;
  bottom: 0;
  left: 0;

  .page-bottom-content {
    width: 1200px;
    display: flex;
    justify-content: space-between;
    align-content: center;

    .total {
      font-size: 14px;
      line-height: 32px;
    }
    .pagination-container {
      margin: 0;
    }
  }
}
</style>